<template>
<div>
    <div class="recommend">热销推荐</div>
  <div class="title" v-for="item of recommentlist" :key="item.id">
      <ul>
          <router-link tag="li" :to="/detail/+item.id" class="item">
              <img :src="item.imgurl" alt="">
              <div class="item-wrapp">
                  <p class="item-title">{{item.title}}</p>
                  <p class="item-desc">{{item.desc}}</p>
                  <button class="item-but">{{item.bton}}</button>
              </div>
          </router-link>
      </ul>
  </div>
</div>
</template>

<script>
export default {
  name: 'homerecommend',
  props: {
    recommentlist: Array
  }
}
</script>

<style lang="scss" scoped>
   .recommend{
       width: 100%;
       line-height: .64rem;
       background:rgb(233, 229, 229);
       margin-top: .1rem;
       padding-left: .2rem;
       font-weight: 600;
   }
   .title{
      width: 100%;
      height: 1.8rem;
      text-indent: .2rem;
      .item{
          box-sizing: border-box;
          padding: .1rem;
          width: 100%;
          height: 0;
          padding-bottom: 33%;
          img{
              width: 1.6rem;
              height: 1.6rem;
              float: left;
          }
          .item-wrapp{
              flex: 1;
              float: left;
              margin: .1rem;
              width: 70%;
              .item-title{
                 font-weight: 700;
              }
              .item-desc{
                  color: #ccc;
                  line-height: .68rem;
                  width: 100%;
                   overflow: hidden;
                 white-space: nowrap;
                 text-overflow: ellipsis;
              }
              .item-but{
                  padding: 0 .14rem;
                  border-radius: .06rem;
                  background: rgb(252, 164, 49);
                  color: white;
                  font-weight: 700;
                  margin-left: .2rem;
              }
          }
      }
   }
</style>
